<!DOCTYPE html>
<html lang="zh_CN">

<head>

    <meta charset="utf-8" />
    <title>Proud Kids 在线固定外教小班课</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link type="text/css" rel="stylesheet" href="swiper/swiper.min.css" />
    <link type="text/css" rel="stylesheet" href="css/index.css" />
    <link type="text/css" rel="stylesheet" href="css/home.css" />
    <link rel="stylesheet" href="css/flexible.css">

    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/mobileSelect.css">
    <script src="js/mobileSelect.js"></script>

</head>

<body>
    <div class="container">
        <div class="content-box2 hidden">
            <div class="img-box">
                <img src="./images/success.png" alt="">
            </div>
            <div class="btn-box btn3">
                查看课程详情
            </div>
            <!-- <div class="logo-box">
                <img src="./images/logo.png" alt="">
            </div> -->
        </div>
        <div class="fixed-box1 ">
            <img src="./images/10.png" alt="" class="btm1 payMoney ">
            <img src="./images/btm-btn.jpg" alt="" class="btm2 hidden">
        </div>
        <div class="images-box">
            <div class="img1-box">
                <img src="./images/1.png" alt="">
                <div class="video-box">
                    <video src="https://files.proudkids.cn/video/miracle.mp4" poster="images/group.png" preload="auto"
                        x5-playsinline webkit-playsinline playsinline width="100%">
                    </video>
                </div>
            </div>
            <img src="./images/2.png" alt="">
            <img src="./images/3.png" alt="">
            <img src="./images/4.png" alt="">
            <img src="./images/5.png" alt="">
            <div class="img5-box">
                <div class="flex-box top-box">
                    <img src="./images/511.png" class="item-l item" alt="">
                    <img src="./images/52.png" class="item-r item" alt="">
                </div>
                <div class="bottom-box">
                    <img src="./images/5111.png" class="item-l-b" alt="">
                    <!-- <img src="./images/5222.png" class="item-r item" alt=""> -->
                </div>
            </div>
            <img src="./images/6.png" alt="">
        </div>
        <div class="login-container ">
            <div class="content-box ">
                <div class="flex-box setp-box setp1 ">
                    <img src="./images/cloes.png" alt="" class="close">
                    <img src="./images/bg-top.png" alt="" class="topimg">
                    <div class="input-box">
                        <div class="input-in-box input1 overhidden">
                            <input id="phone" type="tel" maxlength="11" placeholder="请输入手机号">
                        </div>
                        <div class="input-in-box input2">
                            <input id="message" maxlength="4" type="number" placeholder="请输入验证码">
                            <button id="get-message" style="cursor: pointer">获取验证码</button>
                        </div>
                    </div>
                    <div id="next-step" class="btn-box">
                        下一步
                    </div>
                </div>
            </div>
            <div class="content-box-1 content-box hidden">
                <div class="flex-box setp-box setp2 ">
                    <img src="./images/cloes.png" alt="" class="close">
                    <img src="./images/bg-top.png" alt="" class="topimg">
                    <div class="input-box">
                        <div class="input-in-box input1 overhidden">
                            <input id="name" type="text" placeholder="请输入孩子的名字"
                                onkeyup="this.value=this.value.replace(/(^\s+)|(\s+$)/g,'');">
                        </div>
                        <div class="input-in-box input2 relative">
                            <div id="trigger1"><i class="level" style="font-style:normal">请选择级别</i><b
                                    class="levelNum"></b><span class="downicon"></span></div>
                            <ul class="all">
                                <li><b>Level k</b><span>(没有学习过英语)</span></li>
                                <li><b>Level 1</b><span>(学习过 1 年英语)</span></li>
                                <li><b>Level 2</b><span>(学习过 2 年英语)</span></li>
                                <li><b>Level 3</b><span>(学习过 3 年英语)</span></li>
                                <li><b>Level 4</b><span>(学习过 4 年英语)</span></li>
                                <li><b>Level 5</b><span>(学习过 5 年英语)</span></li>
                                <li><b>Level 6</b><span>(学习过 6 年英语)</span></li>
                            </ul>
                        </div>

                    </div>
                    <div id="complete-button" class="btn-box">
                        完成
                    </div>
                </div>
            </div>
        </div>

        <div class="fiexQuit-box hidden">
            <div class="bg-box"></div>
            <div class="quit-box">
                <div class="quitText">
                    退出登录
                </div>
                <div class="isQuit">
                    <span id="yesQuit">确定</span>
                    <span id="noQuit">取消</span>
                </div>
            </div>
        </div>
    </div>
    <!-- Initialize Swiper -->
    <script src="js/jquery.min.js"></script>
    <script src="swiper/swiper.min.js"></script>
    <script src="js/daojishi.js"></script>
    <script src="https://pv.sohu.com/cityjson"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="js/share.js"></script>

    <script>
        var buttonCode = 0;
        var phoneText = '';
        var ruserId;
        var openId = '';
        var baseUrl = 'https://ce.proudkids.cn';
        //var baseUrl = 'http://192.168.1.80:9527'
        var token = '';
        var fee = 0.01; //原价
        var goodsId = 1;
        var amount = 1;
        var wxConfig;
        var cid;
        var refreshToken;
        var GetCodesUrl;
        var headimgurl;
        var channelName = 'ximaReg';
        //微信分享


        //设置cookie
        function setCookie(name, value, iDay, iPath) {
            var oDate = new Date();
            iDay = arguments[2] ? arguments[2] : 1;
            iPath = arguments[3] ? arguments[3] : "/";
            oDate.setDate(oDate.getDate() + iDay);
            document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + oDate + ";path=" + iPath;
        }

        function getCookie(name) {
            var arr = document.cookie.split("; ");
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split("=");
                if (arr2[0] === name) {
                    return decodeURIComponent(arr2[1]);
                }
            }
            return "";
        };
        $('.btn3').click(function () {
            $('.login-container').addClass('hidden')
            $('.content-box2').addClass('hidden');
        })
        $('.close').click(function () {
            $('.login-container').addClass('hidden')
        })
        $(".item-r").click(function () {
            $(this).attr('src', './images/522.png');
            $(".item-l").attr('src', './images/51.png');
            $(".item-l-b").attr('src', './images/5222.png');
        })
        $(".item-l").click(function () {
            $(this).attr('src', './images/511.png');
            $(".item-r").attr('src', './images/52.png')
            $(".item-l-b").attr('src', './images/5111.png');
        })
        //   视频播放

        //$("video").trigger("play"); //for auto play
        $("video").addClass('pause'); //for check pause or play add a class
        $('video').click(function () {
            if ($(this).hasClass('pause')) {
                $("video").trigger("play");
                $(this).removeClass('pause');
                $(this).addClass('play');
            } else {
                $("video").trigger("pause");
                $(this).removeClass('play');
                $(this).addClass('pause');
            }
        })
        $(document).ready(function () {
            var nowDate = new Date();
            var teacherName
            var urlParams;
            if (localStorage.getItem('token')) {
                $('.login-container').addClass('hidden');
                // window.location.href = 'success.html'
                $('.btm2').removeClass('hidden')
                $('.btm1').addClass('hidden')
            }
            if (localStorage.getItem('cid')) {
                urlParams = getRequest();
                if (urlParams.cid != undefined) {
                    cid = urlParams.cid;
                    localStorage.setItem('cid', cid);
                } else {
                    cid = localStorage.getItem('cid');
                }

                console.log(cid);
            } else {
                urlParams = getRequest();
                cid = urlParams.cid;
                localStorage.setItem('cid', cid);
                console.log(cid);
                cid = urlParams.cid;
            };
            ruserId = localStorage.getItem('ruserId');
            console.log(openId + ruserId);
        })

        //获取url参数
        function getRequest() {
            var url = location.search;
            var theRequest = {};
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            //spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '"></span>';
                }
            }
        });

        //~~~~~~~~~~~~~~~~~~~~~~登陆~~~~~~~~~~~~~~~~~~~~~~~~
        $(function () {
            $('.payMoney').click(function () {
                $('.login-container').removeClass('hidden')
            })
            $('#phone').change(function () {
                phoneText = $.trim($('#phone').val());
                if (phoneText.length == 11 && (/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(phoneText))) {} else {
                    tipBlack('请填写正确手机号码！')
                }
            })
            $('#next-step').click(function () {
                checkSms();
            });

            $('#get-message').click(function () {
                getCode();
            })


            function checkPhoneOnce() {
                phoneText = $.trim($('#phone').val());
                console.log(phoneText)
                if (phoneText.length == 11 && (/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(phoneText))) {
                    getCode();
                } else {
                    tipBlack('请填写正确手机号码！')
                }
            }
            //获取验证码
            function getCode() {
                console.log(phoneText)
                if (buttonCode == 1) {
                    tipBlack('发送频繁，请稍后')
                    return false
                } else {
                    console.log('进入')
                    buttonCode = 1;
                    changeText();
                    $.ajax({
                        //url: 'https://wechat.proudkids.cn/packGroupController.do?sendSMS&phone=' + phoneText,
                        url: baseUrl + '/admin//smsCode/' + phoneText,
                        type: 'get',
                        async: false,
                        cache: false,
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            //changeText();
                        },
                        error: function () {
                            //tipBlack('获取失败')
                        }
                    })
                }
            };

            function changeText() {
                if (phoneText) {
                    var rightTime = 60;
                    $('#get-message').html('60秒');
                    countdown = setInterval(function () {
                        if (rightTime > 0) {
                            buttonCode = 1;
                            rightTime--;
                            $('#get-message').html(rightTime + '秒');
                        } else {
                            clearInterval(countdown);
                            buttonCode = 0;
                            $('#get-message').html('点击获取');
                        }
                    }, 1000);
                } else {
                    tipBlack('请输入手机号码！')
                }

            };
            //验证码正确错误
            function checkSms() {
                //接口回掉成功新用户
                phoneText = $.trim($('#phone').val());
                var smsCode = $('#message').val();
                cid = localStorage.getItem('cid');
                if (phoneText.length == 11 && (/^1[3|4|5|6|7|8][0-9]\d{4,8}$/.test(phoneText))) {
                    if ((/^\d{4}$/.test(smsCode))) {
                        $.ajax({
                            //url: 'https://wechat.proudkids.cn/packGroupController.do?checkPhone&phone=' + phoneText + '&userCode=' + smsCode,
                            url: baseUrl + '/auth/ruser/mobile/token?mobile=' + phoneText + '&code=' +
                                smsCode + '&cid=' + cid + '&grant_type=mobile&scope=server',
                            type: 'post',
                            async: false,
                            cache: false,
                            dataType: 'json',
                            success: function (data) {
                                var data = data
                                console.log(data);
                                //接口回掉成功新用户
                                ruserId = data.ruserId;
                                token = data.oauth2.value
                                console.log(data.oauth2.value)
                                localStorage.setItem('token', token)
                                $('.myInfo').removeClass('hidden');
                                if (data.isComplete) {
                                    $('.login-container').addClass('hidden');
                                    // window.location.href = 'success.html'
                                    $('.btm2').removeClass('hidden')
                                    $('.btm1').addClass('hidden')
                                } else {
                                    $('.content-box').addClass('hidden');
                                    $('.content-box-1').removeClass('hidden');
                                }
                            },
                            error: function () {
                                $('#message').siblings('p').removeClass('hidden');
                            }
                        });
                    } else {
                        tipBlack('验证码错误！');
                    }
                } else {
                    tipBlack('请输入手机号码！');

                }
            }

        })

        //~~~~~~~~~~~~~~~~~~~~~~~~新用户完成name提交~~~~~~~~~~~~~~~~

        $(function () {
            var type = 0;
            var name = '';
            var enName = '';
            var grade = '';
            $('.all').hide();
            $('#trigger1').click(function () { //下拉动态效果
                $('.all').slideToggle(300);
                if ($('#trigger1 span').hasClass('rotate')) {
                    $('#trigger1 span').removeClass('rotate');
                } else {
                    $('#trigger1 span').addClass('rotate');
                }
            })
            $('.all li').click(function () {
                if ($('#trigger1 span').hasClass('rotate')) {
                    $('#trigger1 span').removeClass('rotate');
                } else {
                    $('#trigger1 span').addClass('rotate');
                }
                $(this).addClass('selected')
                $(this).siblings().removeClass('selected');
                $('#trigger1 .level').text($('.all .selected').text().substring(0, 6))
                $('#trigger1 .levelNum').text($('.all .selected').text().substring(6, 7))
                if ($('.all .selected').text().substring(6, 7) == 1) {
                    grade = 1
                } else if ($('.all .selected').text().substring(6, 7) == 2) {
                    grade = 2
                } else if ($('.all .selected').text().substring(6, 7) == 3) {
                    grade = 3
                } else if ($('.all .selected').text().substring(6, 7) == 4) {
                    grade = 4
                } else if ($('.all .selected').text().substring(6, 7) == 5) {
                    grade = 5
                } else if ($('.all .selected').text().substring(6, 7) == 6) {
                    grade = 6
                } else {
                    grade = '0'
                }
                tipBlack('请选择级别');
                console.log(grade)
                $('.all').slideUp(300);
            })
            $('#name').change(function () {
                $('#name').siblings('p').addClass('hidden');
            });
            //获取cookie
            function getCookie(name) {
                var arr = document.cookie.split("; ");
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split("=");
                    if (arr2[0] === name) {
                        return decodeURIComponent(arr2[1]);
                    }
                }
                return "";
            };
            $('#complete-button').click(function () {
                name = $('#name').val()
                console.log(grade)
                if (!name) {
                    tipBlack('请输入您孩子的名字！');
                }
                if (!grade) {
                    tipBlack('请输入您孩子的名字！');
                }
                if (name && grade) {
                    $.ajax({
                        //url: 'https://wechat.proudkids.cn/packGroupController.do?enrollSubmit&phone=' + phoneText + '&type=' + type + '&name=' + name + '&level=' + level,
                        url: baseUrl + '/ruser/v1/ruser/v3/edit-ruser',
                        type: 'put',
                        async: false,
                        cache: false,
                        headers: {
                            'Authorization': 'Bearer ' + token
                        },
                        contentType: "application/json",
                        data: JSON.stringify({
                            'openId': openId,
                            'name': name,
                            'enName': enName,
                            'pic': headimgurl,
                            'grade': grade,
                            'ruserId': ruserId,
                        }),
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            //接口回掉成功新用户
                            $('.content-box2').removeClass('hidden');
                            $('.login-container').addClass('hidden');
                            $('.btm2').removeClass('hidden')
                            $('.btm1').addClass('hidden')
                            // window.location.href = 'success.html';
                        },
                        error: function (data) {
                            console.log(data)
                        }
                    });
                }

            })
        });

        /*创建新元素toast*/
        function tipBlack(toastText) {
            console.log(3)
            var newDiv = document.createElement("div"); //创建元素
            newDiv.setAttribute("id", "toast"); //为创建的新元素添加属性
            var bodyTags = document.getElementsByTagName("body"); //获得body元素
            thisbody = bodyTags[0]; //获得body元素
            thisbody.appendChild(newDiv); //将新元素加入到body元素中
            var textNode = document.createTextNode(toastText); //创建文本节点
            newDiv.appendChild(textNode); //将创建的文本节点添加到新元素里面算
            setTimeout(toastDispear, 2000);

            function toastDispear() {
                //$(newDiv).fadeOut();
                newDiv.parentNode.removeChild(newDiv);
            }
        }

        //下来菜单
    </script>
</body>

</html>